Reference · Building blocks

Components

The kit's reusable building blocks — feature grid, cards, callouts, FAQ, forms and more. Each building block shows its class and a short note on the left, and a living preview on the right. Everything switches to a single column automatically on mobile.

Building block

Feature grid

Classes .feature-grid, .feature and .feature__icon. Icon, headline, text — three columns, as on the home page. These are the “cards with icon”; column count via --feature-cols.

No build step

Pure HTML, CSS and JS. Runs on a double-click.

Everything via tokens

Three brand colors form the basis for the system.

Thinks in sections

Reusable building blocks instead of copy-paste.

Building block

Cards

Classes .cards and .card. Clickable tiles (without icon) for overviews and hub pages. The grid responsively shifts from one to two and up to --cards-cols columns.

Building block

Callout

Class .callout. A highlighted paragraph for example prompts, quotes from the process or important notes. Multiple .callout elements stack beneath one another with calm spacing.

“I have a logo and some initial copy, but no page structure yet. Help me work out the next sensible step to take.”

“This decision is confirmed. Record it in the project status and, for now, build only the first viewport.”

Building block

FAQ

Classes .faq and .faq__item on native <details> elements. Expandable and collapsible entirely without JavaScript; each entry opens independently.

Do I need a server?
No. The pages run locally on a double-click and on any simple web host.
How do I change color, font or spacing?
Through the tokens in styles.css — one place that affects every page.
How do I add a new page?
Copy an existing page or a template, swap the content, link it in the navigation.

Building block

Stats

Classes .stats, .stat, .stat__value and .stat__label. Three concise numbers with labels — facts at a glance.

0
build dependencies
1
design system
100%
static core

Building block

Steps

Classes .steps, .step and .step__num. A numbered sequence in three columns, single column on mobile.

01

Describe the goal

A short sentence is enough to begin.

02

Kitty clarifies

The AI asks follow-up questions and records decisions.

03

Implementation

Tokens and building blocks are combined into files.

Building block

Contact form

Classes .form and .form__row, two-column fields via .form__columns. Accessible labels, a honeypot against spam and the technical basis for sending.

Building block

Full-bleed image

Class .media. An image with a fixed aspect ratio (default 16:9, changeable via --media-ratio). On a real page it runs across the full content width — here in the preview at column width.

Placeholder graphic in grayscale

Building block

Dark band

Class .section--dark. A deliberately always-dark band — independent of the theme — for CTA sections and the footer. Primary/Secondary pop, Ghost switches to light edges.

Get started

See what's inside.

A dark section as an eye-catcher or the close of a page.

Primary Ghost

Keep exploring

More reference

The section layouts for arranging — or the typography everything is set in.

Section Layouts Typography